import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { global as globalDuck, listTable as listTableDuck } from 'ducks'
import ListTable from 'components/ListTable'
import Icons from 'utils/constents/icons'
import getInviteMembers from 'graphql/user/getPendingMembers.graphql'
import getPendingMemberNumber from 'graphql/user/getPendingMembersPage.graphql'
import cancleInvite from 'graphql/user/cancleInvite.graphql'

const FileList = (orgName, actionInit) => ({ data }) => {
  const makeOpt = (id, fromUser, toUser, content) => [
    {
      src: Icons.DELETE,
      text: '取消邀请',
      action: () => actionInit({
        graphqlAction: cancleInvite,
        submitValues: {
          id,
          fromUser,
          toUser,
          content,
        },
        icon: 'trash alternate',
        title: '取消成员邀请',
        message: '请注意：取消邀请成员的同时会删除对应的通知消息',
      }),
    },
  ]
  return (
    <React.Fragment>
      {data.org_member.map(member => (
        <ListTable.Row>
          <ListTable.Avatar
            src={member.user_object.avatar}
            text={member.user_object.name}
          />
          <ListTable.Cell>{member.role}</ListTable.Cell>
          <ListTable.Avatar
            src={member.create_by_object.avatar}
            text={member.create_by_object.name}
          />
          <ListTable.Time>{member.create_at}</ListTable.Time>
          <ListTable.Cell>{member.invite_info ? member.invite_info.length : '0'}</ListTable.Cell>
          <ListTable.Action
            width={2}
            options={makeOpt(member.id, member.create_by_object.id, member.user_object.id, {
              org_member_id: member.id,
            })}
          />
        </ListTable.Row>
      ))}
    </React.Fragment>
  )
}

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { match, org, actionOpen } = this.props
    const orgId = org.owner_object.id
    const orgName = org.owner_object.name
    let { path } = match.params
    if (!path) path = ''
    const RenderList = FileList(orgName,actionOpen)
    const inviteUrl = `/org/${orgName}/user/members/list`
    return (
      <ListTable
        nav={{
          path,
          homeText: '成员首页',
          homePath: inviteUrl,
        }}
        search={false}
        sort={false}
        pagination={{
          query: getPendingMemberNumber,
          name: 'org_member_aggregate',
          variables: {
            ownerId: orgId,
          },
        }}
        listData={{
          query: getInviteMembers,
          variables: {
            ownerId: orgId,
            limit: 10,
          },
          header: (
            <ListTable.Header>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                名称
              </ListTable.HeaderCell>
              <ListTable.HeaderCell />
              <ListTable.HeaderCell>角色</ListTable.HeaderCell>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                邀请人
              </ListTable.HeaderCell>
              <ListTable.HeaderCell />
              <ListTable.HeaderCell>邀请时间</ListTable.HeaderCell>
              <ListTable.HeaderCell>子组织数</ListTable.HeaderCell>
              <ListTable.HeaderCell />
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '当前组织没有待确认成员',
          action: {
            text: '返回成员首页',
            url: inviteUrl,
          },
        }}
      />
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  link: path => push(path),
  actionOpen: listTableDuck.creators.actionOpen,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(DatasetData)
